<template>
  <el-dialog :title="modelValue.name" v-model="officeVisiable" :before-close="onBeforeClose" destroy-on-close draggable
      width="80%" top="5vh">
      <div class="h-[70vh] overflow-auto">
          <vue-office-docx :src="modelValue.url" v-if="isDocx" @rendered="renderedHandler" @error="errorHandler" />
          <vue-office-excel :src="modelValue.url" v-if="isExcel" @rendered="renderedHandler" @error="errorHandler" />
          <!-- <vue-office-pdf :src="modelValue.url" v-if="isPdf" @rendered="renderedHandler" @error="errorHandler" /> -->
          <iframe :src="modelValue.url" v-if="isPdf" frameborder="0" class="w-full h-full"></iframe>
      </div>
  </el-dialog>
</template>

<script setup>
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'
import VueOfficeExcel from '@vue-office/excel'
import '@vue-office/excel/lib/index.css'
import VueOfficePdf from '@vue-office/pdf'

import { computed, watch, ref } from "vue";
import { fileSuffixTypeUtil } from "@/utils/logicalTools/utils.ts";

let emit = defineEmits([
  "update:modelValue"
]);

const props = defineProps({
  modelValue: { // 展示文件的数据对象
      type: Object,
      default: () => {
          return {
              name: '',
              url: ''
          }
      },
  },
})

let officeVisiable = ref(false)   // 文件展示弹框

// 实现双向绑定
watch(
  () => props.modelValue,
  (val) => {
      officeVisiable.value = val.url ? true : false
  }
)

const isExcel = computed(() => {
  return fileSuffixTypeUtil.matchFileSuffixType(props.modelValue.url) == 'xlsx'
});
const isDocx = computed(() => {
  return fileSuffixTypeUtil.matchFileSuffixType(props.modelValue.url) == 'docx'
});
const isPdf = computed(() => {
  return fileSuffixTypeUtil.matchFileSuffixType(props.modelValue.url) == 'pdf'
});

// 关闭弹框
const onBeforeClose = () => {
  emit('update:modelValue', {
      name: '',
      url: ''
  })
}

// 文件展示失败
const errorHandler = () => {
  console.log("渲染失败")
}

// 文件展示成功
const renderedHandler = () => {
  console.log("渲染完成")
}


</script>

<style scoped lang="scss"></style>
